<template>
  <!--功能配置-->
  <div style="width: 100%" v-show="show">
    <el-collapse v-model="activeName">
      <el-collapse-item name="1" title="功能配置" v-if="rulesList.length!==0">
        <div style="padding-left: 40px">
          <el-collapse v-model="activeName_">
            <template v-for="(item,index) in rulesList">
              <el-collapse-item :title="tempTitle[item.name]"
                                :name="index">
                <component :is="item.component"
                           :formDataAll="formDataAll"
                           :option="option"
                           ref="rules"
                           :show="show"
                           :noBtn="noBtn"
                           :disabled="disabled"
                           :item="item">
                </component>
              </el-collapse-item>
            </template>
          </el-collapse>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2" title="API/操作列表" v-if="!displayTable">
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="tableData"
                   ref="crud">
          <template slot="menu" slot-scope="{row,size}">
            <el-button type="text" :size="size" @click="open(row)">测试</el-button>
          </template>
        </avue-crud>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import VersionRules from "./functionTemp/versionRules.vue";
import CodeRules from "./functionTemp/codeRules.vue";
import StateRules from "./functionTemp/stateRules.vue";

import index from "./index"

import * as api from "../../../api/modulManage/entity"

export default {
  name: "Function",
  components: {StateRules, CodeRules, VersionRules},
  mixins: [index],
  props: {
    displayTable: {
      type: Boolean,
      default: () => false
    },
    noBtn: {
      type: Boolean,
      default: () => false
    }
  },
  inject: ["temp"],
  data() {
    return {
      activeName: ["1", "2"],
      activeName_: [0, 1, 2],

      tableData: [],
      loading: false,
      option: {
        height: '300px',
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: false,
        labelWidth: 120,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "center",
        menu: true,
        menuWidth: 80,
        header: false,
         rowKey: "oid",
        rowParentKey: "parentId",
        column: [
          {
            label: "操作名称",
            prop: "name",
            overHidden: true,
          },
          {
            label: 'API中文名称',
            prop: 'apiNameCn',
            overHidden: true,
          },
          {
            label: "API英文名称",
            prop: "apiNameEn",
            overHidden: true,
          },
          {
            label: "接口地址",
            prop: "apiUrl",
            overHidden: true,
          },
          {
            label: "API描述",
            prop: "apiDescribe",
            overHidden: true,
          }
        ],
      },

      tempTitle: {
        "versionable": "版本规则配置",
        "codable": "编码规则配置",
        "lifecyclable": "状态规则配置"
      },

      rulesRequest: [],
    }
  },
  computed: {
    rulesList() {
      let data = [];
      if (this.formDataAll.extendsData && this.formDataAll.extendsData.length > 0) {
        data.push(...this.formDataAll.extendsData);
      }
      if (this.formDataAll.functionInterfaceList && this.formDataAll.functionInterfaceList.length > 0) {
        data.push(...this.formDataAll.functionInterfaceList);
      }

      return data.filter(item => {
        if (item.name === "versionable") {
          item.component = "VersionRules";
        }
        if (item.name === "codable") {
          item.component = "codeRules";
        }
        if (item.name === "lifecyclable") {
          item.component = "stateRules";
        }
        if (this.temp === "1") {
          return ["versionable", "codable", "lifecyclable"].includes(item.name)
        }
        return ["lifecyclable"].includes(item.name)
      });
    }
  },
  methods: {
    open(row) {
      window.open(row.apiDocUrl, '_blank')
    },

    getListAllOperation() {
      let ids = this.formDataAll.functionInterfaceList.map(i => i.name).join(",");
      api.listAllOperation({
        typeName: this.formDataAll.parentName,
        interfaceNames: ids,
        refType: this.temp,
        typeId: this.formDataAll.oid
      }).then(res => {
        this.tableData = res.data.data;
      })
    },
    validate() {
      let rules = this.$refs.rules;
      let flag = 0;
      let msg = [];
      for (const key in rules) {
        if (rules[key] && typeof rules[key].validate === "function") {
          let d = rules[key].validate()
          if (!d.state) {
            flag++;
            msg.push(d.msg);
          }
        }
      }

      return {state: flag === 0, msg};
    }
  },
  watch: {
    show: {
      handler(v) {
        if (v && !this.displayTable) {
          this.getListAllOperation();
          this.$refs["crud"].refreshTable();
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
